<template>
  <!-- <div class="aca_main flex_column mt20 mb100">
    <div class="aca_main_text">
        <h1><strong class="font50">健康课程</strong></h1>
        <h1><strong class="font50">全方面养生视频</strong></h1>
    </div>
    <div class="aca_main_group bold">
        <a-card hoverable style="width: 300px">
            <template #cover>
                <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            </template>
            <a-card-meta title="陈氏太极拳12aaa">
                <template #description>
                    <div class="bg_orange">太极 健康 运动 养生</div>
                </template>
            </a-card-meta>
            <div class="mt20 mb15 light_gray">
                <hr/>
            </div>
            <a-button type="primary" shape="round">立即观看</a-button>
        </a-card>
        <a-card hoverable style="width: 300px">
            <template #cover>
                <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            </template>
            <a-card-meta title="中医彭鑫博士养生操">
                <template #description>
                    <div class="bg_orange">养生操 运动 健康</div>
                </template>
            </a-card-meta>
            <div class="mt20 mb15 light_gray">
                <hr/>
            </div>
            <a-button type="primary" shape="round">立即观看</a-button>
        </a-card>
        <a-card hoverable style="width: 300px">
            <template #cover>
                <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            </template>
            <a-card-meta title="吃鸡蛋=高胆固醇?">
                <template #description>
                    <div class="bg_orange">鸡蛋 高胆固醇 膳食 均衡 健康</div>
                </template>
            </a-card-meta>
            <div class="mt20 mb15 light_gray">
                <hr/>
            </div>
            <a-button type="primary" shape="round">立即观看</a-button>
        </a-card>
    </div>
  </div> -->

  <div class="mt100 mb100">
    <a-row type="flex" align="middle"
           class="mb50">
        <a-col :span="24">
            <h1><strong class="font50">健康课程</strong></h1>
            <h1><strong class="font50">全方面养生视频</strong></h1>
        </a-col>
    </a-row>
    <a-row>
        <a-col>
            <a-carousel autoplay :autoplay-speed="5">
                <a-row :gutter="[64, 64]">
                    <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" v-for="(item, index) in cards" :key="index">
                        <a-card hoverable bordered>
                            <template #cover>
                                <img alt="example" :src="item.image" />
                            </template>
                            <a-card-meta :title="item.title">
                                <template #description>
                                    <div class="bg_orange">{{ item.description }}</div>
                                </template>
                            </a-card-meta>
                            <div class="mt20 mb15 light_gray">
                                <hr/>
                            </div>
                            <a-button type="primary" shape="round">立即观看</a-button>
                        </a-card>
                    </a-col>
                </a-row>
            </a-carousel>
        </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
    data () {
        return {
            cards: [{
                    title: '陈氏太极拳12aaa', 
                    description: '太极 健康 运动 养生', 
                    image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'
                },{
                    title: '陈氏太极拳12aaa', 
                    description: '太极 健康 运动 养生', 
                    image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'
                },{
                    title: '陈氏太极拳12aaa', 
                    description: '太极 健康 运动 养生', 
                    image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
// .ant-carousel :deep(.slick-slide) {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   text-align: center;
//   height: 160px;
//   background: #364d79;
//   overflow: hidden;
// }

// .ant-carousel :deep(.slick-slide h3) {
//   color: #fff;
// }
</style>